<template>
	<div class="cameras-ai-server">
		<div class="AIname">
			<div class="AIname-left">
				<div class="font-12">第一步</div>
				<p>选择AI服务</p>
			</div>
		</div>
		<template v-if="pageControlState.hasAlgoAuth">
			<vue-scroll>
				<ul class="cameras-ai-server-list">
					<li
						:key="item.id"
						v-for="(item, index) in props.serveState.serviceList"
						:class="[item.selected === 1 && 'active']"
						:disabled="item.selectable === 0"
						style="position: relative"
						class="cameras-ai-server-list-item"
					>
						<div :class="['cameras-ai-server-list-item-left', item.selectable === 0 && 'disabled']">
							<a-tooltip
								:title="item.selectable !== 1 ? '无法添加更多' : undefined"
								:get-popup-container="(e) => e.parentNode as HTMLElement"
							>
								<a-checkbox
									:id="item.id.toString()"
									:checked="item.selected === 1"
									:disabled="item.selectable === 0"
									@change="onServiceCheckedChange($event.target.checked, item)"
								></a-checkbox>
							</a-tooltip>
							<div>
								<p class="text">{{ item.aiSrvName }}</p>
							</div>
						</div>

						<div class="cameras-ai-server-list-item-right" @click="handleOpenServiceForm(item, index)">
							<div :class="[!item.useDefaultConfig && 'custom']">
								{{ item.useDefaultConfig ? '默认' : '自定义' }}
							</div>
							<i v-show="item.id !== 100" class="iconfont icon-arrow-right-s-line"></i>
						</div>

						<div class="effect">
							<a-tooltip :title="item.effective === 0 ? '算法已停用,在AI服务中开启算法后自动生效' : null">
								<div v-if="item.effective === 0 && item.selected === 1">未生效</div>
							</a-tooltip>
						</div>
					</li>
				</ul>
			</vue-scroll>
		</template>

		<no-algo-auth v-else :text="'您需要在获得算法授权后才可以使用算法对画面进行分析。'"></no-algo-auth>
	</div>
</template>

<script lang="ts" setup>
import { NoAlgoAuth } from '../../index';
import type { AreaState, ServeState, PageControlState } from '../../../type';
type TsProps = {
	pageControlState: PageControlState;
	serveState: ServeState;
	areaState: AreaState;
	noInfraredCamera?: boolean;
};
const props = withDefaults(defineProps<TsProps>(), {
	pageControlState: () => {
		return {} as PageControlState;
	},
	serveState: () => {
		return {} as ServeState;
	},
	areaState: () => {
		return {} as AreaState;
	},
	noInfraredCamera: true
});

const emits = defineEmits<{
	(e: 'on-checked', checked: boolean, info: any): void;
	(e: 'on-open', info: any, selected: number): void;
}>();

/**
 * 算法配置表单打开
 * @param info 列表item数据
 * @param selected  是否选中
 */
const handleOpenServiceForm = (info: any, selected: number) => {
	if (info.id !== 100) {
		emits('on-open', info, selected);
	}
};
/**
 * 算法服务选中
 * @param info 列表item数据
 * @param selected  是否选中
 */
const onServiceCheckedChange = (checked: boolean, info: any) => {
	emits('on-checked', checked, info);
};
</script>

<style lang="less" scoped>
.cameras-ai-server {
	display: flex;
	width: var(--cameras-ai-server-list-width);
	height: 100% !important;
	padding: 16px 0 10px;
	color: @white;
	flex-direction: column;

	.AIname {
		display: flex;
		margin-bottom: 16px;
		padding: 0 20px;
		text-align: left;
		color: #f0f6fc;
		justify-content: space-between;
		align-items: center;

		.AIname-right {
			color: @text03;
		}

		.AIname-left {
			display: flex;
			align-items: center;
			gap: 8px;
			font-weight: 700;

			> div {
				border: 1px solid rgba(255, 255, 255, 0.12);
				border-radius: 5px;
				padding: 2px 6px;
				font-family: 'D-DIN-BOLD';
				font-weight: 400;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 100%);
			}
		}
	}

	.cameras-ai-server-list {
		display: flex;
		padding: 0 20px;
		flex-direction: column;
		gap: 10px;

		.cameras-ai-server-list-item {
			display: flex;
			height: 72px;
			border: 1px solid transparent;
			border-radius: 10px;
			padding: 0 12px 0 16px;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			color: @text01;
			background: rgba(23, 104, 225, 0.05);
			cursor: pointer;
			align-items: center;
			justify-content: space-between;

			.effect {
				position: absolute;
				top: 2px;
				right: 6px;
				font-family: 'Noto Sans SC';
				font-size: 10px;
				font-weight: 400;
				font-style: normal;
				line-height: 20px;
				color: #ffbe46;
			}

			&.active {
				border: 1px solid rgba(255, 255, 255, 0.15);
				background:
					linear-gradient(0deg, rgba(126, 178, 255, 0.2) 0%, rgba(126, 178, 255, 0.2) 100%),
					linear-gradient(180deg, #203a63 0%, #0e203d 100%),
					url('@/global-assets/imgs/bgc_ai_serve_active.png') no-repeat;
				background-position: right center;
				background-size: contain;
				background-blend-mode: exclusion;
			}

			&:hover:not(.active, [disabled='true']) {
				background: rgba(23, 104, 225, 0.15);
			}

			&[disabled='true'] {
				background: rgba(0, 0, 0, 0.03);
				cursor: not-allowed;

				.cameras-ai-server-list-item-left {
					p,
					:deep(.ant-checkbox) {
						opacity: 0.3;
					}
				}

				.cameras-ai-server-list-item-right {
					opacity: 0.3;
				}
			}

			.cameras-ai-server-list-item-left {
				display: flex;
				align-items: center;
				gap: 0 12px;

				.text {
					overflow: hidden; //超出部分隐藏
					width: 120px;
					white-space: nowrap; //不换行
					text-overflow: ellipsis; //文本溢出显示省略号
				}
			}

			.cameras-ai-server-list-item-right {
				display: flex;
				align-items: center;
				gap: 0 2px;

				> div {
					border-radius: 100px;
					padding: 2px 6px;
					font-size: 12px;
					font-weight: 400;
					line-height: 20px;
					color: #79a4e7;
					background: rgba(225, 237, 255, 0.05);

					&.custom {
						border: 1px solid rgb(103, 205, 115);
						color: @text01;
						background: linear-gradient(180deg, #67cd73 0%, rgba(103, 205, 115, 0.49) 100%);
					}
				}

				> i {
					color: @text03;
				}
			}
		}
	}
}
</style>
